<!--
 * @Author: xuna
 * @Descripttion: 查看员工关联订单
-->
<template>
  <div class="check-container">
    <el-form ref="formInline" :inline="true" :model="orderLot" :label-position="labelPosition">
      <el-row type="flex" class="check-search">
        <el-col class="share-input">
          <el-form-item label="订单类型:" prop="share">
            <el-select v-model="orderLot.orderType" placeholder="请选择" class="normal-input">
              <el-option
                v-for="item in orderTypelist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col class="setting-btn">
          <el-form-item>
            <el-button class="settbtn search-btn" type="primary" @click="getTableList">
              搜索
            </el-button>
            <el-button class="settbtn reset-btn" @click="resetForm()">重置</el-button>
            <el-button class="settbtn reset-btn" @click="exportExcel">
              导出
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="recond-detail">
      <el-row type="flex" class="reconcile-tip">
        <el-col :span="4" class="label-tip">
          <span>{{ billDetail.date }}</span>
        </el-col>
        <el-col :span="4" class="label-tip">
          员工姓名：
          <span>{{ billDetail.realName }}</span>
        </el-col>
        <el-col :span="4" class="label-tip">
          所属部门
          <span>{{ billDetail.deptName }}</span>
        </el-col>
      </el-row>
      <el-row type="flex" class="reconcile-tip">
        <el-col :span="4" class="label-tip">
          订单总数：
          <span>{{ billDetail.orderNumber }}</span>
        </el-col>
        <el-col :span="4" class="label-tip">
          订单总金额（元）：
          <span>{{ billDetail.orderAmount }}</span>
        </el-col>
        <el-col :span="4" class="label-tip">
          支付总金额（元）：
          <span>{{ billDetail.payAmount }}</span>
        </el-col>
      </el-row>
    </div>

    <!-- 表格 -->
    <wf-el-table :list="tableData" :total="total" :current="current" @on-page-change="onPageChange">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column
        v-for="item in propData"
        :key="item.label"
        :prop="item.prop"
        :label="item.label"
      ></el-table-column>
    </wf-el-table>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { downloadBlob } from '@/utils/download';
  import WfElTable from '@/components/Table/index';
  import { getAdvanceOrderList, exporteOrderListExcel } from '@/api/reconcilidetail';
  export default {
    components: { WfElTable },
    data() {
      return {
        current: 1,
        total: 0,
        tableData: [],
        propData: [
          {
            prop: 'orderNo',
            label: '订单编号',
          },
          {
            prop: 'realName',
            label: '员工姓名',
          },
          {
            prop: 'accountNumber',
            label: '用户账号',
          },
          {
            prop: 'orderType',
            label: '订单类型',
          },
          {
            prop: 'createTime',
            label: '下单时间',
          },
          {
            prop: 'state',
            label: '订单状态',
          },
          {
            prop: 'orderAmount',
            label: '订单金额',
          },
          {
            prop: 'payType',
            label: '支付方式',
          },
          {
            prop: 'payAmount',
            label: '支付金额',
          },
        ],
        orderLot: { orderType: null },

        orderTypelist: [
          {
            label: '全部',
            value: null,
          },
          {
            label: '薪商城',
            value: 0,
          },
          {
            label: '到店',
            value: 1,
          },
          {
            label: '外卖',
            value: 2,
          },
          {
            label: '充值薪礼卡',
            value: 3,
          },
        ],
        labelPosition: 'right',
        dialogTip: '',
        dialogVisible: false,
        billDetail: '',
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      organId() {
        return this.userInfo.organId;
      },
      userId() {
        return this.userInfo.id;
      },
      isEmpty() {
        return this.tableData.length == 0;
      },
    },
    activated() {
      this.billDetail = this.$route.query;
      this.getTableList();
    },
    methods: {
      getTableList() {
        this.initList(1, this.orderLot.orderType);
      },
      async resetForm() {
        this.$refs.formInline.resetFields();
        this.orderLot.orderType = await null;
        this.getTableList();
      },
      onPageChange(data) {
        this.initList(data.current, this.orderLot.orderType);
      },
      initList(current, orderType) {
        let objData = {
          billDate: this.billDetail.date,
          billDetailId: this.billDetail.billDetailId,
          current,
          orderType,
          orgId: this.organId,
          size: 10,
          userId: this.userId,
        };
        getAdvanceOrderList(objData).then(res => {
          console.log(res);
          if (res.status == 200) {
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        });
      },
      async exportExcel() {
        let objData = {
          billDate: this.billDetail.date,
          billDetailId: this.billDetail.billDetailId,
          current: this.current,
          orderType: this.orderLot.orderType,
          orgId: this.organId,
          size: 10,
          userId: this.userId,
        };
        const res = await exporteOrderListExcel(objData);
        res && downloadBlob(res.data, res.filename || '关联员工订单名单.xls');
        this.$message.success('导出成功！');
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  .check-container {
    @include wh(100%, 100%);
    overflow: hidden;
    padding-top: 0 !important;
    .check-search {
      @include wh(100%, 65px);
      background-color: #fff;
      border-radius: 7px;
      padding-left: 34px;
      box-sizing: border-box;
      margin-bottom: 16px;
      /deep/.el-col {
        display: flex;
        align-items: center;
      }
      /deep/.el-form-item {
        margin-bottom: 0;
      }
      /deep/.el-form-item__label {
        @include font(14px, #7f848b, 400);
      }
      /deep/.el-input {
        @include wh(210px, 36px);
        background: rgba(255, 255, 255, 1);
        border-radius: 7px;
        border: 1px solid rgba(244, 240, 243, 1);
      }
    }
    /deep/.el-form--inline {
      border-radius: 7px;
    }

    /deep/.el-table {
      border-radius: 7px;
    }
    .recond-detail {
      @include wh(100%, 88px);
      border-radius: 7px;
      background-color: #fff;
      margin-bottom: 16px;
      padding: 16px 30px;
      box-sizing: border-box;
      .reconcile-tip {
        margin-bottom: 16px;
        .label-tip {
          @include font(14px, #7f848b, 400);
          span {
            color: #1e2023;
          }
        }
      }
    }
    .setting-btn {
      display: flex;
      justify-content: flex-end;
    }
    .share-input {
      display: flex;
      align-items: center;
      /deep/.el-form-item {
        margin-bottom: 0;
      }
    }
    .settbtn {
      width: 94px;
      height: 36px;
      border-radius: 7px;
    }
    .reset-btn {
      background: rgba(255, 254, 255, 1);
      border: 1px solid rgba(232, 228, 232, 1);
    }
    .search-btn {
      background-color: #3771e9;
    }
    .normal-input {
      width: 210px;
      height: 36px;
    }
  }

  // /deep/.wf-table-wrapper {
  //   height: calc(100vh - 193px) !important;
  // }
</style>
